import 'package:flutter/material.dart';
import 'package:net_music/home_page.dart';

class RootPage extends StatefulWidget {
  RootPage({Key? key}) : super(key: key);

  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int _currentIndex = 0;

  final Map<String, String> _bottomBarNames = {
    "home": "首页",
    "music": "音乐",
    "create_media": "",
    "tiny_video": "小视频",
    "profile": "我的",
  };

  final List<BottomNavigationBarItem> _bottomNavBarItems = [];

  @override
  void initState() {
    super.initState();
    _bottomBarNames.forEach((key, value) {
      _bottomNavBarItems.add(_setupBottomNavBatItem(key, value));
    });
  }

  // 底部导航tabbar被点击
  void _onSelectedTabBarItem(int index) {
    setState(() {
      _currentIndex = index;
      print(index);
    });
  }

  void _onClickFloatingButton() {
    _onSelectedTabBarItem(2);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: _bottomNavBarItems,
        onTap: _onSelectedTabBarItem,
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        // backgroundColor: Colors.cyan,
        // selectedLabelStyle: const TextStyle(color: Colors.white, fontSize: 14),
        // unselectedLabelStyle: const TextStyle(color: Colors.grey, fontSize: 12),
      ),
      body: IndexedStack(
        children: [
          HomePage(),
          HomePage(),
          HomePage(),
          HomePage(),
          HomePage(),
        ],
        index: _currentIndex,
      ),
      floatingActionButton: Container(
        margin: const EdgeInsets.only(top: 24),
        child: FloatingActionButton(
          child: Image.asset(
            'assets/images/icons/create_media.png',
            width: 48,
            height: 48,
          ),
          onPressed: _onClickFloatingButton,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  BottomNavigationBarItem _setupBottomNavBatItem(
      String iconName, String itemName) {
    return BottomNavigationBarItem(
      icon: Image.asset(
        'assets/images/icons/$iconName.png',
        width: 24,
        height: 24,
      ),
      activeIcon: Image.asset(
        'assets/images/icons/${iconName}_active.png',
        width: 24,
        height: 24,
      ),
      label: itemName,
    );
  }
}
